<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElButton, ElCard, ElTag, ElRow, ElCol, ElDivider, ElSkeleton } from 'element-plus';
import { Map, Star, Calendar, Sunny, Clock, ArrowLeft } from '@element-plus/icons-vue';
import { destinationApi } from '../api/destination.js';

const route = useRoute();
const router = useRouter();
const destination = ref(null);
const loading = ref(true);
const error = ref(null);

// 获取目的地详情
const fetchDestinationDetail = async () => {
  const id = route.params.id;
  loading.value = true;
  try {
    const response = await destinationApi.getDestinationById(id);
    if (response.success) {
      destination.value = response.data;
    } else {
      error.value = response.message || '获取目的地详情失败';
    }
  } catch (err) {
    error.value = '网络错误，请稍后重试';
    console.error('获取目的地详情失败:', err);
  } finally {
    loading.value = false;
  }
};

// 返回列表页
const goBack = () => {
  router.push('/');
};

// 组件挂载时获取数据
onMounted(() => {
  fetchDestinationDetail();
});
</script>

<template>
  <div class="detail-container">
    <!-- 返回按钮 -->
    <div class="back-button">
      <ElButton type="default" icon="el-icon-arrow-left" @click="goBack">返回列表</ElButton>
    </div>

    <!-- 加载中状态 -->
    <div v-if="loading" class="loading-container">
      <ElSkeleton :rows="6" animated />
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <p>{{ error }}</p>
      <ElButton type="primary" @click="fetchDestinationDetail">重试</ElButton>
    </div>

    <!-- 目的地详情内容 -->
    <div v-else-if="destination" class="destination-detail">
      <!-- 头部图片 -->
      <div class="detail-header">
        <img :src="`/travel-images/${destination.image.split('/').pop()}`" :alt="destination.name" class="detail-image" />
        <div class="detail-overlay">
          <h1 class="detail-title">{{ destination.name }}</h1>
          <div class="detail-meta">
            <ElTag type="primary" size="large">{{ destination.category }}</ElTag>
            <span class="rating">
              <Star class="star-icon" />
              {{ destination.rating }}
            </span>
          </div>
        </div>
      </div>

      <!-- 详细信息 -->
      <ElRow :gutter="20" class="detail-content">
        <ElCol :span="18">
          <ElCard class="info-card">
            <template #header>
              <h2 class="card-title">目的地介绍</h2>
            </template>
            <p class="description">{{ destination.description }}</p>
          </ElCard>
        </ElCol>

        <ElCol :span="6">
          <ElCard class="meta-card">
            <template #header>
              <h3 class="card-title">基本信息</h3>
            </template>
            <div class="meta-item">
              <Map class="meta-icon" />
              <span class="meta-label">位置：</span>
              <span class="meta-value">{{ destination.location }}</span>
            </div>
            <div class="meta-item">
              <Star class="meta-icon" />
              <span class="meta-label">评分：</span>
              <span class="meta-value">{{ destination.rating }}</span>
            </div>
            <div class="meta-item">
              <Sunny class="meta-icon" />
              <span class="meta-label">天气：</span>
              <span class="meta-value">{{ destination.weather }}</span>
            </div>
            <div class="meta-item">
              <Calendar class="meta-icon" />
              <span class="meta-label">最佳游玩时间：</span>
              <span class="meta-value">{{ destination.best_time_to_visit }}</span>
            </div>
            <div class="meta-item price-item">
              <span class="price-label">价格：</span>
              <span class="price-value">¥{{ destination.price }}</span>
            </div>
          </ElCard>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>

<style scoped>
.detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  margin-bottom: 20px;
}

.loading-container,
.error-container {
  padding: 40px;
  text-align: center;
}

.error-container p {
  margin-bottom: 20px;
  color: #f56c6c;
}

.destination-detail {
  margin-top: 20px;
}

.detail-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 30px;
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 40px;
  color: white;
}

.detail-title {
  font-size: 36px;
  margin: 0 0 15px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 18px;
}

.star-icon {
  color: #ffd700;
  margin-right: 5px;
}

.detail-content {
  margin-bottom: 30px;
}

.info-card,
.meta-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 20px;
  margin: 0;
}

.description {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
}

.meta-icon {
  color: #667eea;
  margin-right: 10px;
}

.meta-label {
  color: #666;
  margin-right: 5px;
  min-width: 80px;
}

.meta-value {
  color: #333;
  font-weight: 500;
}

.price-item {
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
  margin-top: 15px;
}

.price-label {
  font-size: 16px;
  color: #666;
}

.price-value {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b6b;
}

@media (max-width: 768px) {
  .detail-header {
    height: 250px;
  }
  
  .detail-overlay {
    padding: 20px;
  }
  
  .detail-title {
    font-size: 24px;
  }
  
  .detail-content {
    flex-direction: column;
  }
  
  .ElCol {
    width: 100% !important;
  }
}
</style>